<template>
  <div class="box">
    <div class="title">
      <div class="date"><i class="iconfont icon-yuzhouxingqiu-18"></i> {{ orderData.start }}</div>
      <div class="order-id"><i class="iconfont icon-benzi"></i> 订单号:{{ orderData._id }}</div>
    </div>
    <div class="item" v-for="item in orderData.items" :key="item._id">
      <div class="r-detail">
        <div class="img"><img :src="'/api' + item.goods.cover" alt="" /></div>
        <div class="text">{{ item.goods.name }}</div>
      </div>
      <div class="r-price">￥{{ item.goods.price }}</div>
      <div class="r-quantity">{{ item.quantity }}</div>
      <div class="r-total">
        <div style="font-weight: 600; font-size: 12px; color: #000; margin-left: 1.5em;">{{ item.total }}</div>
        <div style="font-size: 10px; color: #ccc;">(含运费0.00)</div>
      </div>
      <div class="r-status">
        <div class="method">{{ orderData.method }}</div>
        <div style="font-size: 10px; color: #ccc;">(含运费0.00)</div>
      </div>
      <div class="r-option">
        <button :class="{disabled: orderData.status === '是'}" :disabled="orderData.status === '是'" @click="confirm">{{ orderData.status === '否' ? '确认收货' : '收货完成'}}</button>
      </div>
    </div>
    <div class="footer">
      总价：<span style="font-size: 14px; color: #CD3852;">{{ orderData.total }}</span>
      <span style="margin-left: 15px; font-size: 12px; color: #ccc;">{{ orderData.method === '到店自取' ? '(含运费0.00)' : '(含运费1.00)' }}</span>
    </div>
  </div>
</template>

<script>
import { received } from '@/api/index.js'
export default {
  props: {
    orderData: {
      // type: {},
      required: true
    }
  },
  methods: {
    async confirm() {
      this.$emit('changeData', this.orderData._id)
      const { data } = await received('/api/home/comfirmorder', { id: this.orderData._id })
      console.log(data)
    }
  }
}
</script>

<style lang="less" scoped src="@/assets/css/myOrderInfo.less"></style>
<style scoped>
@import url('//at.alicdn.com/t/font_2903624_m9vickga7n.css');
</style>
